Rodrigo

Hi @allen1997831 and welcome to the GSAP Forums! The main issue is this: window.addEventListener('resize', () => { ScrollTrigger.refresh(); setupScrollTriggers(); }); First, there is no need to call the refresh() method on window resize, ScrollTrigger senses that by itself and debounces the refresh method to prevent wasting resources. Then you're setting up your ScrollTrigger and GSAP instances on every resize event without killing and reverting them, hence the extra markers you're seeing, because you have multiple ScrollTrigger instances that are starting at the same time, one for every resize callback. For this is far better to just use GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Here is a fork of your demo: https://codepen.io/GreenSock/pen/ExzweWQ Hopefully this helps. Happy Tweening!

Hi, Sorry to hear about the issues but it has been reported before that Astro view transitions api creates some issues with GSAP, that mostly stem from cleanup when the routes are mounted and unmounted. Maybe the information in these threads can help: Hopefully this helps. Happy Tweening!

Hi, I don't really understand what you mean with this TBH The solution I posted predicates in installing the GSAP Plugins from the dist folder which is available when you install GSAP with NPM running this: npm install -s gsap Then in your files/components you should import like this: import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } By the way your codesandbox demo still throws an error 🤷‍♂️ Happy Tweening!

Hi, Without a minimal demo is really hard for us to find any issues. The only thing I can think of is that you're working with a specific UI framework/library like Vue, Svelte or React and have conditional rendering or something like that? Also if you just want to animate the same properties back and forth, is better to just toggle the Tween/Timeline as shown in this demo: https://codepen.io/GreenSock/pen/GReGMje Hopefully this helps. Happy Tweening!

Hi @scd and welcome to the GSAP Forums! Mostly this is about the start and end positions. By default ScrollTrigger works in a vertical fashion but you are mixing vertical and horizontal values, so these start and end points are not correct: const tl = gsap.timeline({ scrollTrigger: { trigger: '.time', start: 'top left', end: 'bottom left', scrub: true } }); Basically you're telling ScrollTrigger that you want the animation to start when the top of the trigger hits the left of the viewport and to end when the bottom of the trigger hits the left. On top of that your demo doesn't have GSAP installed, so you're getting an error there. We have this starter demo that uses ScrollTrigger in SvelteKit: https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6 Hopefully this helps. Happy Tweening!

Hi, Check this thread, especially the demo by @PointC: Hopefully this helps. Happy Tweening!

Hi, The main issue is this: tl2 .to("#red", {keyframes:{ "0%" : {rotation: 0}, "33%" : {rotation: -15}, "66%" : {rotation: 15}, "100%": {rotation: 0} }, ease: "none", repeat: -1, duration: 1.5}, 0) .duration(15) // <- Here Basically you have a timeline that has a child tween that runs forever (repeat: -1), then you tell GSAP: "I want this timeline to last 15 seconds", so GSAP squeezes the child instance in that time, which is mathematically impossible since you can't compress infinity into something with a fixed value. My guess is that in this particular case there is something in GSAP's core that accommodates that in someway. When you set the duration what you're doing is altering the Timeline's timescale, so it goes super fast: https://gsap.com/docs/v3/GSAP/Timeline/duration() What you could try is something like this, so set a defined number of repeats for the tween: var tl2 = gsap.timeline(); const totalDuration = 15; tl2 .to( "#red", { keyframes: { "0%": { rotation: 0 }, "33%": { rotation: -15 }, "66%": { rotation: 15 }, "100%": { rotation: 0 } }, ease: "none", repeat: Math.round(totalDuration / 1.5), duration: 1.5 }, 0 ); Here is a fork of your demo: https://codepen.io/GreenSock/pen/wvbrjwV Hopefully this helps. Happy Tweening

Hi @webdevcanuck and welcome to the GSAP Forums! Honestly I think your implementation is quite good, since is just 45 lines of code. You can't do more with less code IMHO, so I wouldn't change a thing about it. If is not broken don't fix it! Happy Tweening!

Hi @BernasN135 and welcome to the GSAP Forums! In Draggable you can define bounds using a selector, a DOM element or specific values. From the Draggable docs: https://gsap.com/docs/v3/Plugins/Draggable/#bounds Here is a simple demo of how you can set it up: https://codepen.io/GreenSock/pen/QWRqQeJ Hopefully this helps. Happy Tweening!

Hi @Diolix, In Draggable when you pass a function expression to a callback, inside that function this refers to the Draggable instance, so this.x is the x value of the Draggable instance. From the Draggable docs: https://gsap.com/docs/v3/Plugins/Draggable/x Be aware that this is not the case with arrow functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions Hopefully this clear things up. Happy Tweening!

Hi @Marc Storch and welcome to the GSAP Forums! I fiddled with your demo for a bit and can't seem to replicate the issue, the only thing I did notice is your HTML structure and your ScrollSmoother config object. By default ScrollSmoother will look for this HTML structure: <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> But yours is like this: <div class="page"> <!-- CONTENT HERE --> </div> So you need to set a content target in your ScrollSmoother config: ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, content: ".page", }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/xxNXYJb Finally there is no need for this in the return callback of GSAP MatchMedia: mm.add("(min-width: 768px)", () => { ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, }); return () => { const smooth = ScrollSmoother.get(); if(smooth) ScrollSmoother.get().kill(); }; }); Since GSAP MatchMedia is a wrapper for a GSAP Context instance, so it'll pick all the GSAP instances inside and revert them automatically for you when the breakpoint is passed. Hopefully this helps. Happy Tweening!

Hi, We've seen some issues with the view transitions implementation in NextJS as well, so there could be some broader problems with that specification. My recommendation would be to wait until the view transition is completed before creating the new ScrollTrigger instances and be sure to remove all the ScrollTrigger and GSAP instances when you're changing routes (cleanup), which can be done super easy with GSAP Context. Finally you might want to have a look at this video by @SteveS on last year's Svelte Summit: Happy Tweening!

Hi, I'm not 100% sure I understand what you're trying to achieve here, but maybe something like this? https://codepen.io/GreenSock/pen/rNgGLYL Hopefully this helps. Happy Tweening!

Hi, Right now I don't have time to dig into all of this and provide a demo. As mentioned before this is not the simplest thing to achieve. I'll se if I can create a simple demo that shows how to create two different Observer instances that work with ScrollTrigger but please understand that we don't have all the time resources to create demos for complex issues, I just want to manage expectations. Finally regarding this: That seems super odd because onEnter and onEnterBack trigger in very different ways. The onEnter callback is triggered when scrolling forward or down while the onEnterBack is triggered when scrolling back or up. Finally I recommend you to use the same settings for wheel speed and tolerance as the demo we have, since most likely the scroll event is still being triggered when the animation is completed, perhaps add an extra conditional logic there until the touch event is no longer firing. Keep in mind that mobile devices have momentum scroll baked in, so is not just a one off event like the mouse wheel. You can test this URL on your device and see if you get the same issue: https://codepen.io/pen/debug/oNdNLxL Happy Tweening!

Hi, This could be about proper cleanup on route changes. For that I would recommend using GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() This demo, doesn't have any routes, but uses GSAP Context in the way we suggest for SvelteKit projects (or any other framework that handles routing in the way SvelteKit does it like Vue and React and SSR libraries/frameworks that use them under the hood): https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6?file=src%2Froutes%2F%2Bpage.svelte https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9?file=src%2Froutes%2F%2Bpage.svelte Hopefully this helps. Happy Tweening!